<template>
    <div>
        <h1>{{ count }}</h1>
        <button v-on:click="count++">按钮</button>
        <button @click="count++">按钮</button>
        <button @click="changeCount">按钮</button>


        <button @click="sayHello('张三')">张三</button>
        <button @click="sayHello('李四')">李四</button>


        <a href="https://www.woniuxy.com" @click.prevent>蜗牛学苑</a>


        <div class="father" @click.self="sayHello('爸爸')">
            <div class="child"></div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(100);


function sayHello(name) {
    console.log("你好" + name);
}


// 在JS中可以创建任意的函数
function countChange() {
    console.log(count.value);
    count.value++;
    console.log(count.value);
}

const changeCount = () => {
    console.log(count.value);
    count.value++;
    console.log(count.value);
}

</script>

<style scoped>
.father {
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

.child {
    width: 100px;
    height: 100px;
    background-color: blue;
}
</style>